import React from 'react';
import Grid from '../../components/table/grid';
import { injectIntl } from 'react-intl';
import moment from 'moment';
import {Form ,Row ,Col, Select ,Button,Input,Divider,Modal} from 'antd';
import axios from 'axios';
import qs from 'qs';
import { sessionManager } from '../../utils/sessionStorage';
const FormItem = Form.Item;
const createForm = Form.create;
const Option = Select.Option;
const confirm = Modal.confirm;
class MerchantLedgerSettlement extends React.Component {
	constructor(props) {
		super(props);
		this.columns = [
			{
				title: '负责人',
				width: 100,
				key: 'chiefName',
				dataIndex:'chiefName',
				fixed: 'left',
			},
			{
				title: '结算账号',
				width: 150,
				key: 'account',
				dataIndex:'account',
				fixed: 'left',
			},
			{
				title: '结算周期',
				width: 150,
				key: 'settlementDate',
			
				render: (text) => {
					if(text.lastSettlementDate){
						return <span>{text.lastSettlementDate}-{text.settlementDate}</span>
					}else{
						return text.settlementDate
					}
						
						
	
				}
			},
			{
				title: '提交时间',
				dataIndex: 'createTime',
				key: 'createTime',
				width: 150,
			},
			{
				title: '公司名称',
				dataIndex: 'companyName',
				key: 'companyName',
				width: 250,
			},
			{
				title: '电量(KWH)',
				dataIndex: 'settlementPower',
				key: 'settlementPower',
				width: 150,
			},
			{
				title: '电费(元)',
				width: 150,
				dataIndex: 'settlementElectric',
				key: 'settlementElectric',
			},
			{
				title: '服务费(元)',
				dataIndex: 'settlementService',
				key: 'settlementService',
				width: 150,
			},
			{
				title: '结算金额(元)',
				dataIndex: 'settlementMoney',
				key: 'settlementMoney',
				width: 150,
			},
			{
				title: '调整金额(元)',
				dataIndex: 'adjustmentMoney',
				key: 'adjustmentMoney',
				width: 150,
			},
			{
				title: '实际金额(元)',
				dataIndex: 'money',
				key: 'money',
				width: 150,
			},
			{
				title: '调整电量(KWH)',
				dataIndex: 'actualPower',
				key: 'actualPower',
				width: 150,
			},
			{
            title: '状态',
            key: 'status',
            width: 100,
            fixed: 'right',
            render: (text) => {
            			return text.status === 0 ? '结算中' : '结算完成'
            			}
            },
			{
				title: '操作',
				key: 'action',
				fixed: 'right',
				width: 200,
				render: (text, record) => {
					let divider,button;
					if(text.status===0){
						 divider = <Divider type="vertical"/>;
						 button =
						<span>
							<a onClick={()=>this.showConfirm(text)}>完成结算</a>
								<Divider type="vertical"/>
							<a onClick={() => this.goLink(text, record, 'merchantAdjust')}>调整记录</a>
							{divider}
							{button}
                        </span>
					}
					return (
						<span>
							<a onClick={() => this.goLink(text, record, 'merchantSettlementDetail')}>详情</a>
							{divider}
							{button}
                    	</span>
					)
				}



			}
		];
		this.state = {
			refresh:0,
			params:{
			}
		};
	}
	statusChange(val,option){
		console.log('11111',val,option)
	};
	inquireBillList=(e)=>{
		e.preventDefault();
		this.props.form.validateFieldsAndScroll((errors, values) => {
			if (!!errors) {
				return;
			}
			console.info('Received values of form:',this.state.params,values);
			this.setState({
				params:Object.assign(this.state.params, values),
				refresh:this.state.refresh+1
			})
		});
	};
	exportAllLists(){
		console.log('导出列表')
	};
	freshGrid = () => {
		this.setState({
			refresh: this.state.refresh + 1
		});
	};
	showConfirm=(text)=>{
		confirm({
			title: '确认完成结算?',
			content: '',
			onOk:()=> {
				axios.get('/api/settlement/billSplit/completeSettlement',{ params:{id: text.id}}).then(res => {
					if(res&&res.code==200){
						this.freshGrid()
					}
				});
			},
			onCancel() {
				console.log('Cancel');
			},
		});
	}
	goLink = (text, record, link) => {
		// sessionManager.clearItem('rowRecord');
		sessionManager.set('rowRecord',text);
		this.props.history.push({pathname: `/finance/${link}`,state: {rowRecord: text}});
	};
	render() {
		const {getFieldDecorator} = this.props.form;
		const token=(JSON.parse(sessionStorage.getItem("token"))||{}).token;
		let exportQs=`${qs.stringify(this.state.params)}&token=${token}`;
		return (
			<div>
				<Form layout="inline" onSubmit={this.inquireBillList} className="pad-24">
						<FormItem label="">
							{getFieldDecorator('userName', {
							})(<Input placeholder="请输入关键词" />)}
						</FormItem>
						<FormItem label="">
							{getFieldDecorator('account', {
								initialValue:null,
								rules: [{
									type: 'number',
									message: '请输入正确的账号',
									transform(value) {
										return Number(value);
									}
								}],
							})(<Input placeholder="请输入账号" />)}
						</FormItem>
						<FormItem label="">
							{getFieldDecorator('status', {
							})(<Select
								placeholder='请选择结算状态'
								allowClear={true}
								style={{ width: 160 }}
								onChange={this.statusChange}>
								<Option value="0">未结算</Option>
								<Option value="1">结算完成</Option>
							</Select>)}
						</FormItem>
						<FormItem>
							<Button type="primary" htmlType="submit" >查询</Button>
						</FormItem>
						<FormItem>
							<a href={`${axios.defaults.baseURL}/api/billSplit/settlementOrderBillList/export?${exportQs}`}>
								<Button type="primary" onClick={this.exportAllLists}>导出所有列表</Button>
							</a>

						</FormItem>
					</Form>
				<Grid url="api/settlement/billSplit/settlementOrderBillList" columns={this.columns} refresh={this.state.refresh} params={this.state.params}/>
			</div>
		)
	}
}

MerchantLedgerSettlement = createForm()(MerchantLedgerSettlement);
export default injectIntl(MerchantLedgerSettlement)